import React, { Component } from 'react'
import { Modal, List, Tabs, WhiteSpace, PickerView } from 'antd-mobile';
import '../assets/style/modelType.less'
import Input from "./Input";



export default class modelType extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: null,
            modal2: false,
            houseType: ["一室一厅一卫"],
            orientation: ["请选择"],
            renovation: ["请选择"],
        }
    }
    showModal = key => (e) => {
        e.preventDefault(); // 修复 Android 上点击穿透
        this.setState({
            [key]: true,
        });
    }
    onClose = key => () => {
        let val = this.state.houseType.join('').split(' ').concat(this.state.orientation,  this.state.renovation)
        this.props.onOk(val)
        this.setState({
            [key]: false,
        });
    }
    onChange = (value, key) => {
        this.setState({
            [key]: value,
            value,
        });
    }

    render() {
        let tabs = [
           
            {
                title: <span style={{ height: '40px', lineHeight: '16px' }} >
                    <div>朝向</div>
                    <div style={{ fontWeight: 500, color: 'black' }}>{this.state.orientation.join('')}</div>
                </span>
            },
            {
                title: <span style={{ height: '40px', lineHeight: '16px' }} >
                    <div>户型</div>
                    <div style={{ fontWeight: 500, color: 'black' }}>{this.state.houseType.join('')}</div>
                </span>
            },
            {
                title: <span style={{ height: '40px', lineHeight: '16px' }} >
                    <div>装修</div>
                    <div style={{ fontWeight: 500, color: 'black' }}>{this.state.renovation.join('')}</div>
                </span>
            },
        ]
        return (
            <div className="modelTypeStyle">
                <List.Item arrow="horizontal" multipleLine onClick={() => this.setState({
                    modal2: !this.state.modal2
                })}>
                    <span className="title">{this.props.title}</span>
                    <div>
                        <Input type="text" value={this.props.value ? this.props.value : ""} className="input"  placeholder={this.props.placeholder} onFocus={
                            // this.props.onFocus(event)
                            this.showModal('modal2')
                        } />
                    </div>
                </List.Item>
                <Modal
                    popup
                    visible={this.state.modal2}
                    onClose={this.onClose('modal2')}
                    animationType="slide-up"
                >
                    <List className="popup-list">
                        <WhiteSpace />
                        <Tabs tabs={tabs} initialPage={1} animated={false} useOnPan={false}>
                            <PickerView
                                onChange={(v) => this.onChange(v, 'orientation')}
                                value={this.state.orientation}
                                data={this.props.seasons1}
                                cascade={false}
                                cols={1}
                            />
                            <PickerView
                                onChange={(v) => this.onChange(v, 'houseType')}
                                value={this.state.houseType}
                                data={this.props.seasons}
                                cascade={false}
                                cols={3}
                            />
                            <PickerView
                                onChange={(v) => this.onChange(v, 'renovation')}
                                value={this.state.renovation}
                                data={this.props.seasons2}
                                cascade={false}
                                cols={1}
                            />
                        </Tabs>
                        <a onClick={this.onClose('modal2')} >确认</a>
                        <WhiteSpace />
                    </List>
                </Modal>
            </div>
        )
       
    }
}
